<!-- -->
<template>
  <div class="goodsdetails">
    <el-container>
      <el-main>
        <div class="details">
          <div class="details_left">
            <el-carousel :interval="5000" arrow="always">
              <el-carousel-item v-for="item in goodList.imgList" :key="item.id">
                <img :src="item.url" alt="" />
              </el-carousel-item>
            </el-carousel>
            <!-- <div class="showImage">
              <img :src="showUrl" alt="">
            </div>
            <div class="showImageList"></div> -->
          </div>
          <div class="details_right">
            <div class="textSetting">
              <h1 :title="'Xmall 品牌好物：' + goodList.name">
                Xmall 品牌好物：{{ goodList.name }}
              </h1>
              <h2 :title="'价格：' + goodList.price">
                价 格：¥{{ goodList.price }}规格：{{ goodList.unit }}
              </h2>
              <br />
              <br />
              <h3>库 存：{{ goodList.stock }}</h3>
              <br />
              <h4>上架时间：{{ goodList.createTime }}</h4>
              <h4>更新时间：{{ goodList.updateTime }}</h4>
            </div>
            <div class="orderGood">
              <template>
                <el-input-number
                  v-model="num"
                  :min="1"
                  :max="10"
                  label="描述文字"
                ></el-input-number>
                <el-button
                  style="margin-left:14px;background-color:rgb(213,34,39);color:white"
                  @click="sendOut()"
                  >加入购物车</el-button
                >
                <el-button
                  style="margin-left:14px;background-color:rgb(213,34,39);color:white"
                  @click="pay()"
                  >立即购买</el-button
                >
              </template>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "GoodsDetails",
  data() {
    return {
      userId: "",
      goodId: "",
      goodList: {},
      showUrl: "",
      num: 1
    };
  },
  created() {
    // this.getList();
    // this.testPut();
    this.getGoodList();
  },
  methods: {
    Success(index) {
      this.$message.success(index);
    },
    Fail(index) {
      this.$message.error(index);
    },
    // handleChange(value) {
    //     console.log(value);
    //   },
    getList() {
      this.axios
        .get("/goods/getList")
        .then(response => {
          console.log(response);
        })
        .catch(err => {
          console.log(err);
        });
    },
    testPut() {
      this.axios
        .put("/goods/details", { id: 123 })
        .then(response => {
          console.log(response.body);
        })
        .catch(err => {
          console.log(err);
        });
    },
    getGoodList() {
      this.goodId = sessionStorage.getItem("goodId");
      this.axios
        .post("/api/goods/findById", {
          id: this.goodId
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code === 200) {
            this.goodList = res.data.data;
            if (this.goodList.updateTime === null) {
              this.goodList.updateTime = "暂无更新";
            }
            this.showUrl = this.goodList.imgList[0].url;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    sendOut() {
      this.userId = sessionStorage.getItem("userId");
      this.axios
        .post("/api/cart", {
          gid: this.goodList.id,
          uid: this.userId,
          num: this.num
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code === 200) {
            this.Success("加入购物车成功,可在购物车页面查看");
          } else {
            this.Fail("加入购物车失败，请稍后尝试");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    pay() {}
  }
};
</script>
<style scoped>
.goodsdetails {
  width: 100%;
  height: 100%;
  /* z-index: 20;

  position: relative; */
}
.el-container {
  width: 100%;
  height: 100%;
  background-color: white;
}
.el-main {
  width: 100%;
  height: 100%;
  background-color: white;
}
.details {
  width: 80%;
  height: 70%;
  margin-top: 5%;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
}
.details_left {
  float: left;

  width: 40%;
  height: 100%;

  /* background-color: green; */
}
.details_left img{
  width: 100%;
  height: 100%;
}
.showImage {
  width: 100%;
  height: 70%;
  background-color: black;
}
.showImage img {
  height: 100%;
  width: 100%;
}
.showImageList {
  width: 100%;
  height: 30%;
  background-color: white;
}
.details_right {
  float: left;
  width: 60%;
  height: 100%;
  background-color: white;
}
.textSetting {
  width: 100%;
  height: 80%;
  padding-left: 24px;

  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.orderGood {
  width: 100%;
  height: 20%;

  padding-left: 24px;
}
</style>